<script setup lang="ts"></script>

<template>
  <div class="main-app">
    主应用
    <header>
      <!-- 路由跳转 -->
      <router-link to="/home">home</router-link>
      <router-link to="/about">about</router-link>

      <!-- 跳转子应用 -->
      <router-link to="/app-hash/">app-hash</router-link>
      <router-link to="/app-history/">app-history</router-link>
      <router-link to="/app-webpack/">app-webpack</router-link>
    </header>

    <main>
      <!-- 子应用容器 -->
      <div id="appContainer" class="appContainer"></div>

      <!-- 主应用路由视图 -->
      <router-view v-slot="{ Component }">
        <component :is="Component" />
      </router-view>
    </main>
  </div>
</template>

<style scoped>
.main-app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.main-app a {
  padding-right: 20px;
}
.appContainer{
  background: #ccc;
  padding: 20px;
}
</style>
